<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="col-md-9">
    <div class="data_list">
        <div class="data_list_title"><span class="iconfont icon-essential-information "></span>&nbsp;个人信息</div>
        <div class="container-fluid">
            <div class="row" style="padding-top: 20px;">
                <%--左边占2/3 右边占1/3--%>
                <%--左边--%>
                <div class="col-md-8">
                    <form class="form-horizontal" method="post" action="${person.personId}" enctype="multipart/form-data">
                        <input type="hidden" id="fileImg" value="${fileImg}">
                        <div class="form-group">
                            <label for="personName" class="col-sm-3 control-label">姓名:</label>
                            <div class="col-sm-6">
                                <input class="form-control" name="personName" id="personName" placeholder="昵称"
                                       value="${person.personName}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="personName" class="col-sm-3 control-label">余额:</label>
                            <div class="col-sm-6">
                                <input class="form-control" name="personName" id="personMoney" placeholder="余额"
                                       value="${person.personMoney}" readonly>
                            </div>
                        </div>
                        <div>
                            <div class="form-group">
                                <label for="mood" class="col-sm-3 control-label">修改头像:</label>
                                <div class="col-sm-1"><img id="userHead" class="form-img" src="../statics/images/user/${person.personImg}">
                                </div>
                                <div class="col-sm-8">
                                    <input id="updateImg" class="form-file" type="file">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mood" class="col-sm-3 control-label">个人简介:</label>
                            <div class="col-sm-8">
                                <textarea class="form-control" name="mood" id="mood" rows="3">${person.content}</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" id="btn" class="btn btn-success" onclick="return updateUser();">
                                    保存修改
                                </button>&nbsp;&nbsp;
                                <span style="color:red; font-size: 12px;" id="msg"></span>
                            </div>
                        </div>
                    </form>
                </div>
                    <script>
                        $('#updateImg').change(function (){
                            var imgpath = $('#fileImg').val()
                            var files = $('#updateImg')[0].files[0]
                            console.log(files)
                            var data = new FormData();
                            //下面的键值对不是随意的 和后端参数一致 必须是POST请求
                            data.append('file',files)
                            data.append('fileImg',imgpath)
                            $.ajax({
                                url:'../util/filePost.data',
                                type:'POST',
                                data:data,
                                processData:false,
                                contentType:false,
                                dataType:'json',
                                success:function (result){
                                    console.log(result.filename)
                                    //    通过在服务器(导航栏有ip地址)的相对路径重新加载
                                    //前面./作用是返回到服务器项目根地址 -- 规定的路径最好就是原来用户存的路径，这样只需要修改数据库的名就行了，下次加载就能在原路径加载
                                    $("#userHead").attr("src", "../statics/images/user/"+result.filename)
                                },
                            })
                        })
                    </script>
                <%--    右边--%>
                <div class="col-md-4">
                    <img style="width:240px;height:180px" src="../statics/images/user/${person.personImg}">
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .control-label {
        padding-bottom: 7px;
    }

    .form-file {
        padding-bottom: 7px;
        padding-top: 7px;
    }

    .form-img {
        height: 34px;
        width: 34px;
    }
</style>